<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <style>
        div {
            width: 500px;
            margin: 80px auto 0;
            text-align: center;
            border: 1px solid black;
            padding: 20px;
            padding-bottom: 40px;
            box-sizing: border-box;
            border-radius: 7px;
            background-color: rgba(172, 202, 235, 0.486);
        }


        button {
            width: 200px;
            height: 40px;
            font-size: 18px;
            background-color: rgb(40, 201, 207);
            border: none;
            color: white;
        }

        #username,
        #userpsd {
            width: 200px;
            height: 18px;
        }

        span {
            font-weight: 600;
        }
    </style>
</head>

<body>
    <div>
        <h1>登录</h1>
        <span>用户名：</span><input type="text" class="username"><br><br>
        <span>密码：</span>&emsp;<input type="password" class="userpsd"><br><br>
        <label><input type="checkbox" class="rememberPsd">记住密码</label>&emsp;
        <label><input type="checkbox" class="autoLogon">自动登录</label><br><br><br>
        <button>登录</button>
    </div>

    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        // 获取注册的数据
        var login = JSON.parse(localStorage.getItem('enroll'))

        // 绑定点击事件
        $('button').click(() => {
            var username = $('.username').val()
            var userpsd = $('.userpsd').val()
            if (username == login.name && userpsd == login.psd) {
                var record = {
                    uname: username,
                    upsd: userpsd,
                    // 定义两个表示记住密码和自动登录的状态
                    status1: false,
                    status2: false
                }
                if ($('.rememberPsd').prop('checked') == true) {
                    record.status1 = true
                }
                if ($('.rememberPsd').prop('checked') == true && $('.autoLogon').prop('checked') == true) {
                    record.status1 = true
                    record.status2 = true
                }
                localStorage.setItem('record', JSON.stringify(record));
                location.assign("./商品首页.html")
            } else {
                alert(`用户名或密码错误，请核对后重新输入`)
            }
        })

        var record = JSON.parse(localStorage.getItem('record'))
        console.log(record);

        if (record.status1) {
            $('.username').val(record.uname)
            $('.userpsd').val(record.upsd)
            $('.rememberPsd').prop('checked', true)
        }
        if (record.status1 == true && record.status2 == true) {
            $('.rememberPsd').prop('checked', true)
            $('.autoLogon').prop('checked', true)
            location.assign("./商品首页.html")
        }
    </script>
</body>

</html>